<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 场景演示</title>
    
    <!-- Import Map - 解决 Three.js 模块导入问题 -->
    <script type="importmap">
    {
        "imports": {
            "three": "/lib/three/build/three.module.js",
            "three/addons/": "/lib/three/examples/jsm/"
        }
    }
    </script>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            background: #000;
            color: #fff;
        }

        #viewer-container {
            width: 100vw;
            height: 100vh;
            position: relative;
        }

        #viewer-container canvas {
            display: block;
            outline: none;
        }

        /* 加载界面 */
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .loading-spinner {
            width: 60px;
            height: 60px;
            border: 6px solid #333;
            border-top-color: #4a90e2;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 30px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        #loading-text {
            font-size: 18px;
            color: #fff;
            text-align: center;
            line-height: 1.6;
        }

        /* 信息栏 */
        #info-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #ccc;
            z-index: 100;
        }

        #fps-counter {
            color: #4a90e2;
        }

        /* 控制提示 */
        #controls-hint {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px 20px;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1.8;
            z-index: 100;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

        #controls-hint:hover {
            opacity: 1;
        }

        #controls-hint h3 {
            margin-bottom: 10px;
            color: #4a90e2;
            font-size: 16px;
        }

        #controls-hint p {
            margin: 5px 0;
            color: #ccc;
        }

        #controls-hint .key {
            display: inline-block;
            background: #333;
            padding: 2px 8px;
            border-radius: 3px;
            margin: 0 3px;
            color: #fff;
            font-family: monospace;
        }

        /* 隐藏控制提示按钮 */
        #toggle-hint {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(74, 144, 226, 0.8);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            z-index: 101;
            display: none;
        }

        #toggle-hint:hover {
            background: rgba(74, 144, 226, 1);
        }

        /* 响应式 */
        @media (max-width: 768px) {
            #controls-hint {
                display: none;
            }
            #toggle-hint {
                display: block;
            }
        }
    </style>
</head>
<body>
    <!-- 3D 查看器容器 -->
    <div id="viewer-container"></div>

    <!-- 加载界面 -->
    <div id="loading-overlay">
        <div class="loading-spinner"></div>
        <div id="loading-text">正在加载场景...</div>
    </div>

    <!-- 控制提示 -->
    <div id="controls-hint">
        <h3>🎮 控制说明</h3>
        <p><span class="key">鼠标左键</span> 旋转视角</p>
        <p><span class="key">鼠标右键</span> 平移视角</p>
        <p><span class="key">滚轮</span> 缩放视角</p>
    </div>

    <!-- 信息栏 -->
    <div id="info-bar">
        <div id="mode-info">演示模式</div>
        <div id="fps-counter">FPS: 0</div>
    </div>

    <!-- 初始化日志 -->
    <script>
        console.log('');
        console.log('╔═══════════════════════════════════════════════════════╗');
        console.log('║       演示前端页面加载                                ║');
        console.log('╚═══════════════════════════════════════════════════════╝');
        console.log('');
        console.log('📄 页面: index.html');
        console.log('🕐 时间:', new Date().toLocaleString('zh-CN'));
        console.log('🌐 URL:', window.location.href);
        console.log('');
        console.log('准备加载 viewer.js...');
        console.log('');
    </script>

    <!-- Three.js 库 -->
    <script type="module">
        console.log('✅ 模块脚本开始执行');
        console.log('📦 准备导入 viewer.js');
        
        try {
            // 动态导入并捕获错误
            const module = await import('/scripts/viewer.js');
            console.log('✅ viewer.js 导入成功');
        } catch (error) {
            console.error('');
            console.error('╔═══════════════════════════════════════════════════════╗');
            console.error('║       ❌ viewer.js 加载失败                           ║');
            console.error('╚═══════════════════════════════════════════════════════╝');
            console.error('');
            console.error('错误类型:', error.name);
            console.error('错误信息:', error.message);
            console.error('错误堆栈:', error.stack);
            console.error('');
            console.error('💡 可能的原因:');
            console.error('   1. viewer.js 文件不存在或路径错误');
            console.error('   2. viewer.js 中有语法错误');
            console.error('   3. 导入的模块路径不正确');
            console.error('   4. 浏览器不支持 ES6 模块');
            console.error('');
            
            // 在页面上显示错误
            document.getElementById('loading-text').innerHTML = 
                `❌ 加载失败<br><br>${error.message}<br><br>请查看控制台了解详情`;
        }
    </script>

    <script>
        // 5秒后自动隐藏控制提示
        setTimeout(() => {
            const hint = document.getElementById('controls-hint');
            if (hint) {
                hint.style.opacity = '0';
                setTimeout(() => {
                    hint.style.display = 'none';
                }, 300);
            }
        }, 5000);

        // 显示模式信息
        window.addEventListener('DOMContentLoaded', async () => {
            console.log('📋 DOMContentLoaded 事件触发');
            try {
                console.log('   → 读取配置文件...');
                const response = await fetch('/project/config.json');
                const config = await response.json();
                console.log('   ✓ 配置读取成功:', config.mode);
                
                const modeInfo = document.getElementById('mode-info');
                if (config.mode === 'offline') {
                    modeInfo.textContent = '📦 离线模式';
                } else if (config.mode === 'online') {
                    modeInfo.textContent = '🌐 在线模式';
                }
            } catch (error) {
                console.error('   ✗ 配置读取失败:', error);
            }
        });
    </script>
</body>
</html>
